<!-- ------------------注册------------- -->
<template>
	<view class="root">
		<view class="title">注册</view>
		<view class="inputContent">
			<view class="inputList">
				<input type="text" v-model="phone" placeholder="请输入手机号" />
			</view>
			<view class="inputList">
				<input type="text" v-model="yqm" placeholder="请输入邀请码" />
			</view>
		</view>

		<view class="nextBtn" @click="nextBtn">下一步</view>

		<view
			:style="{
				display: `flex`,
				justifyContent: `center`,
				alignItems: `center`,
				fontSize: `22rpx`,
				margin: `30rpx`,
			}"
		>
			<label
				:style="{
					display: `flex`,
					alignItems: `center`,
				}"
			>
				<switch @change="changeSwitch" type="checkbox" :checked="isAgree" color="#fff" />
				<text :style="{ color: `#999` }">我已阅读并同意</text>
			</label>
			<navigator
				:style="{ color: `#1b1b1b` }"
				hover-class="tap-hover"
				:url="`/pages/webview?url=${decodeURIComponent(
					'http://qkl.xuanhuabang.site/Public/service.html'
				)}`"
			>
				《用户服务协议》
			</navigator>
		</view>
	</view>
</template>

<script>
	import { isPhoneNumber } from "@/static/utils";

	export default {
		data() {
			return {
				phone: "",
				yqm: "",
				isAgree: false,
			};
		},
		methods: {
			changeSwitch({ detail }) {
				this.isAgree = detail.value;
			},
			nextBtn() {
				if (!isPhoneNumber(this.phone) || !this.yqm) {
					uni.showToast({
						title: "请输入正确的手机号和邀请码",
						icon: "none",
					});
					return;
				}

				if (!this.isAgree) {
					uni.showToast({
						title: "您需要阅读并同意服务协议后才能进行下一步",
						icon: "none",
					});
					return;
				}

				uni.navigateTo({
					url: `/pages/loginReg/code?phone=${this.phone}&yqm=${this.yqm}`,
				});
			},
		},
	};
</script>

<style lang="scss">
	::v-deep {
		switch {
			transform: scale(0.6);
			.wx-checkbox-input,
			.uni-checkbox-input {
				border-radius: 50%;
				border-color: #0d81f6;
				background-color: transparent;
			}

			.wx-checkbox-input.wx-checkbox-input-checked,
			.uni-checkbox-input.uni-checkbox-input-checked {
				background-color: #0d81f6;
			}

			&:not([disabled]) {
				.wx-checkbox-input:hover,
				.uni-checkbox-input:hover {
					border-color: #0d81f6;
				}
			}
		}
	}
	.root {
		box-sizing: border-box;
		padding: 99rpx 48rpx 0;
		.title {
			font-size: 48rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 500;
			color: #2a62ff;
			line-height: 60rpx;
			margin-bottom: 40rpx;
		}

		.inputContent {
			.inputList {
				padding: 60rpx 0 10rpx;
				border-bottom: 1rpx solid #d2d2d2;
				input {
					width: 100%;
				}
			}
		}

		.nextBtn {
			width: 100%;
			height: 80rpx;
			background: #2a62ff;
			border-radius: 10rpx;
			font-size: 34rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #ffffff;
			line-height: 80rpx;
			text-align: center;
			margin-top: 150rpx;
		}
	}
</style>

